<template>
  <div>
     <login-top middleTop="登录bilibili">
         <div slot="right" style="font-size:13px" @click="$router.push('/register')">切换到注册</div>
     </login-top>
     <login-text label="账号" placeholder="请输入账号" style="margin:15px 0" rule="^.{6,16}$" @inputChange="res => model.username = res"></login-text>
     <login-text label="密码" placeholder="请输入密码" type="password" rule="^.{6,16}$" @inputChange="res => model.password = res"></login-text>
     <login-btn btntext="登录" @registerSubmit="registerSubmit"></login-btn>
  </div>
</template>

<script>
import LoginTop from '@/components/common/LoginTop.vue'
import LoginText from '@/components/common/LoginText.vue'
import LoginBtn from '@/components/common/LoginBtn.vue'
export default {
    name:'register',
    data () {
        return {
            model: {
                username:'',
                password:''
            }
        }
    },
    methods: {
        async registerSubmit () {
            let rulg = /^.{6,16}$/
            if(rulg.test(this.model.username) && rulg.test(this.model.password) ){
                const res = await this.$http.post('/login',this.model)
                this.$msg.fail(res.data.msg)
                if(res.data.code === 301 || res.data.code === 302) {
                    return
                }
                localStorage.setItem('id',res.data.id)
                localStorage.setItem('token',res.data.token)
                setTimeout( () => {
                    this.$router.push('/userinfo')
                })
            }else{
                this.$msg.fail('格式不正确重新输入')
            }
        }
    },
    components :{
        LoginTop,
        LoginText,
        LoginBtn
    }
}
</script>

<style>

</style>